<template>
    <div class="pack">
        <div class="search">
            <div class="top_div">
                <i style="font-size:38px" class="el-icon-search"></i>
            </div>
            <div class="top_div" style="width:85%">
                <el-autocomplete  
                    style="width:100%"
                    v-model="state"
                    :fetch-suggestions="querySearchAsync"
                    placeholder="请输入要查找的单词(回车确认)"
                    @keyup.enter.native="search"
                ></el-autocomplete>
            </div>
        </div>

        <div class="table">
            <el-table
                :data="wordList"
                @row-click="handleCurrentClick"
                highlight-current-row
                style="width: 100%"
            >
                <el-table-column label="详细解释" width="80">
                    <template prop="wordId" slot-scope="scope">
                        <el-button
                            @click.stop="showDetail(scope.row)"
                            type="primary"
                            icon="el-icon-video-play"
                        ></el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="word" label="单词" width="120" />
                <el-table-column prop="explained" label="解释" />
                <el-table-column prop="date" label="录入日期" width="106" />
            </el-table>
        </div>
        <div class="paging_div">
            <el-pagination
                :page-size="table.pageSize"
                @current-change="handleCurrentChange"
                background
                layout="prev, pager, next"
                :total="table.total"
            ></el-pagination>
        </div>

        <!-- 播放器 -->
        <AudioVue ref="video" />
    </div>
</template>
<script>
import { Notification } from "element-ui";
import { fetchPost } from "../js/http";
import { de } from "vis";
import { card, wordMap } from "../store/storeTest";
import AudioVue from "./Audio.vue";
import { wordStore } from '../store/wordsStore';

export default {
    components: {
        AudioVue
    },
    data() {
        return {
            table: {
                pageSize: 7,
                currentPage: 1,
                total: 0
            },
            palySeed: null,
            videoSrc: "",
            restaurants: wordStore,
            state: "",
            timeout: null,
            wordList: []
        };
    },
    created() {
        this.loadTable();
    },
    methods: {
        loadTable() {
            let self = this;
            fetchPost("/word/list", this.table).then(res => {
                self.wordList = res.data.content;
                self.table.total = res.data.totalElements;
                console.log(res);
            });
        },
        handleCurrentChange(val) {
            this.table.currentPage = val;
            this.loadTable();
        },
        querySearchAsync(queryString, cb) {
            let p = /^[a-z ]+$/;
            if (!p.test(queryString)) {
                cb([]);
                return;
            }
            var restaurants = this.restaurants;
            var results = queryString
                ? restaurants.filter(this.createStateFilter(queryString))
                : restaurants;
            cb(results.splice(0, 5));
        },
        createStateFilter(queryString) {
            return state => {
                return (
                    state.value
                        .toLowerCase()
                        .indexOf(queryString.toLowerCase()) === 0
                );
            };
        },
        search() {
            let word = this.state;
            let self = this;
            let p = /^[a-z ]+$/;
            if (!p.test(word)) {
                Notification.warning(
                    `搜索${word}失败, 只能录入小写字母的单词!`
                );
                return;
            }
            // 添加到单词本
            fetchPost("/word/addWord", { word: word }).then(res => {
                if(res.msg == "add_word") {
                    this.addWord(res.data);
                }else if(res.msg == "has_before"){
                    wordMap.mapEl.moveToByNodeId(res.data.dbId);
                }
                
            });
        },
        read(data) {
            let videlVue = this.$refs.video;
            videlVue
                .start()
                .read(data.word)
                .delayRead(1000, data.explained, 0.8)
                .play();
        },
        addWord(wordInfo) {
            if (wordInfo != null) {
                this.wordList.unshift(wordInfo);
                this.wordList.splice(this.table.pageSize);
                Notification.info(`${wordInfo.word}添加到单词本.`);
            }
        },
        showDetail(word) {
            card.word = word;
            this.$emit("toCard");
        },
        handleCurrentClick(word) {
            let video = this.$refs.video;
            video.start().read(word.word, 0.8).read(word.word).play();
            this.$emit("moveMapByNodeId", word.wordId);
        }
    }
};
</script>
<style scoped>
.pack {
    width: 100%;
    height: 100%;
}
.search {
    height: 62px;
    width: 100%;
    background-color: skyblue;
}
.el-icon-search {
    font-size: 38px;
}
.top_div {
    margin-left: 10px;
    margin-top: 8px;
    float: left;
}
.video {
    display: none;
}
.paging_div {
    bottom: 0;
    margin: 0 auto;
}
</style>